<div class="container">
  <!-- 左侧：上传区 + 测量区 -->
  <div class="left-panel">
    <!-- 图片上传控件（ng-zorro@16 适配） -->
    <!-- 使用nzChange事件 -->
    <div class="upload-area">

      <!-- 图片测量区域 -->
      <div class="measure-container">
        <!-- 有图片时显示测量区 -->
        <div class="measure-wrapper" (click)="onImageClick($event)" (mousemove)="onImageMouseMove($event)"
          (dblclick)="resetAll()" *ngIf="imageUrl; else noImageState">
          <!-- 测量底图 -->
          <img #measureImage [src]="imageUrl" class="measure-image" alt="测量目标图片" (load)="resetAll()">

          <!-- 实时距离提示 -->
          <div *ngIf="showTempDistance" class="temp-distance">
            当前距离: {{ currentTempDistance | number: '1.2-2' }} 厘米
          </div>

          <!-- 鼠标十字准星（新增） -->
          <div *ngIf="imageUrl" class="mouse-crosshair" [style.left]="mouseX + 'px'" [style.top]="mouseY + 'px'"></div>

          <!-- 绘制层（线段和点） -->
          <div class="drawing-layer">
            <!-- 已完成的测量段 -->
            <div *ngFor="let segment of segments; trackBy: trackByIndex">
              <!-- 线段 -->
              <!-- <div class="segment-line" [style.left]="getDisplayPosition(segment.start.x, true) + 'px'"
                [style.top]="getDisplayPosition(segment.start.y, false) + 'px'"
                [style.width]="getLineLength(segment.start, segment.end) + 'px'"
                [style.transform]="getLineTransform(segment.start, segment.end)"
                [style.backgroundColor]="segment.color">
              </div> -->

              <!-- 起点 -->
              <div class="point-marker" [style.left]="getDisplayPosition(segment.start.x, true) + 'px'"
                [style.top]="getDisplayPosition(segment.start.y, false) + 'px'">
                <div class="x-xy x-x" [style.backgroundColor]="segment.color"></div>
                <div class="x-xy x-y" [style.backgroundColor]="segment.color"></div>
              </div>
              <!-- <div class="point-label" [style.left]="getDisplayPosition(segment.start.x, true) + 10 + 'px'"
                [style.top]="getDisplayPosition(segment.start.y, false) - 10 + 'px'">
                段{{ segment.index }}-起 ({{ segment.start.x }}, {{ segment.start.y }})
              </div> -->

              <!-- 终点 -->
              <div class="point-marker" [style.left]="getDisplayPosition(segment.end.x, true) + 'px'"
                [style.top]="getDisplayPosition(segment.end.y, false) + 'px'">
                <div class="x-xy x-x" [style.backgroundColor]="segment.color"></div>
                <div class="x-xy x-y" [style.backgroundColor]="segment.color"></div>
              </div>
              <!-- <div class="point-label" [style.left]="getDisplayPosition(segment.end.x, true) + 10 + 'px'"
                [style.top]="getDisplayPosition(segment.end.y, false) - 10 + 'px'">
                段{{ segment.index }}-终 ({{ segment.end.x }}, {{ segment.end.y }})
                段{{ segment.index }}
              </div> -->
            </div>

            <!-- 当前测量的临时线段和点 -->
            <div *ngIf="currentSegment && tempPoint">
              <!-- <div class="temp-segment-line" [style.left]="getDisplayPosition(currentSegment.start.x, true) + 'px'"
                [style.top]="getDisplayPosition(currentSegment.start.y, false) + 'px'"
                [style.width]="getLineLength(currentSegment.start, tempPoint) + 'px'"
                [style.transform]="getLineTransform(currentSegment.start, tempPoint)"
                [style.backgroundColor]="currentSegment.color"></div> -->

              <div class="point-marker" [style.left]="getDisplayPosition(currentSegment.start.x, true) + 'px'"
                [style.top]="getDisplayPosition(currentSegment.start.y, false) + 'px'">
                <div class="x-xy x-x" [style.backgroundColor]="currentSegment.color"></div>
                <div class="x-xy x-y" [style.backgroundColor]="currentSegment.color"></div>
              </div>
              <div class="point-label" [style.left]="getDisplayPosition(currentSegment.start.x, true) + 10 + 'px'"
                [style.top]="getDisplayPosition(currentSegment.start.y, false) - 10 + 'px'">
                <!-- 段{{ segments.length + 1 }}-起 ({{ currentSegment.start.x }}, {{ currentSegment.start.y }}) -->
              </div>
            </div>
          </div>
        </div>

        <!-- 无图片时的提示 -->
        <ng-template #noImageState>
          <div class="no-image-hint">
            <i nz-icon nzType="picture" nzTheme="outline" class="hint-icon"></i>
            <p>请上传图片后开始测量</p>
          </div>
        </ng-template>
      </div>
    </div>

    <!-- 右侧：测量记录面板 -->
    <div class="records-panel">
      <nz-upload [nzAction]="uploadAction" [nzHeaders]="uploadHeaders" nzListType="text" [nzAccept]="'image/*'"
        (nzChange)="handleChange($event)" [nzShowUploadList]="false">
        <button nz-button nzType="primary" nzSize="large">
          <i nz-icon nzType="upload"></i>
          <span>上传图片</span>
        </button>
        <div *ngIf="imageUrl" class="upload-tip">
          提示：点击可更换图片，新图片将重置测量数据
        </div>
        <p style="border: 1px solid rgba(0, 0, 0, 0.1); margin: 24px 0;"></p>
      </nz-upload>

      <!-- 简化校准：仅比例输入框（核心新增） -->
      <div class="ratio-calibrate" *ngIf="imageUrl">
        <nz-input-number [(ngModel)]="calibrateRatio" [nzMin]="0.01" [nzStep]="0.01" [nzPrecision]="3"
          placeholder="输入校准比例" style="width: 160px; margin-top: 10px;"></nz-input-number>
        <button nz-button nzType="primary" (click)="confirmRatioCalibrate()"
          style="margin-top: 10px; margin-left: 10px;">
          确认校准
        </button>
        <div class="upload-tip calibrate-desc">
          测量校准：输入「屏幕测量值/实际值」的比例（例：屏幕显示2cm，实际1cm → 输入2）
        </div>
        <p style="border: 1px solid rgba(0, 0, 0, 0.1); margin: 24px 0;"></p>
      </div>


      <h3>测量记录</h3>

      <!-- 无记录提示 -->
      <div class="empty-record" *ngIf="segments.length === 0 && !currentSegment">
        <p *ngIf="imageUrl">在图片上点击开始测量</p>
        <p *ngIf="!imageUrl">请先上传图片</p>
      </div>

      <!-- 已完成的记录 -->
      <div *ngFor="let segment of segments; trackBy: trackByIndex" class="record-item">
        <div class="color-tag" [style.backgroundColor]="segment.color"></div>
        <div class="record-info">
          <div class="record-index">距离 {{ segment.index }}</div>
          <div class="record-distance">
            距离: {{ segment.distance | number: '1.2-2' }} 厘米
          </div>
        </div>
        <button class="delete-btn" nz-button nzSize="small" nzShape="circle" (click)="deleteSegment(segment.index)">
          <i nz-icon nzType="close"></i>
        </button>
      </div>

      <!-- 测量中记录 -->
      <div *ngIf="currentSegment" class="record-item temp-record">
        <div class="color-tag" [style.backgroundColor]="currentSegment.color"></div>
        <div class="record-info">
          <div class="record-index">距离 {{ segments.length + 1 }}（测量中）</div>
          <div class="record-distance">点击完成终点</div>
        </div>
      </div>

      <!-- 清空按钮 -->
      <button *ngIf="(segments.length > 0 || currentSegment) && imageUrl" class="reset-btn" nz-button nzType="default"
        (click)="resetAll()">
        <i nz-icon nzType="delete"></i>
        <span>清空所有记录</span>
      </button>
    </div>
  </div>
</div>